import React from 'react';
import MyProcess from './MyProcess';
import style from './style.okr';
import Priority from './Priority';
import moment from 'moment'
import { NextGuide } from '../../guide/Guide';
import util from "../../../util";

class MyOkr extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'MyOkr';
    }
    getLabel = (day) => {
        const {
            okrs = {},
        } = this.props;
        return (
            <div className={style['label-box']}>
                <div className={style['label-process']}>{Math.round(okrs.totalProgress * 100)}</div>
                <div className={style['label-day']}>剩余{day.toFixed(0)}天</div>
            </div>
        );
    }
    render() {
        const {
            okrs = {},
        } = this.props;
        const {
            objectiveVOList = [],
            beginTimestamp,
            endTimestamp,
            thumbup = [],
        } = okrs;
        let now = new Date().getTime();
        if(endTimestamp < now) now = endTimestamp;
        if(beginTimestamp > now) now = beginTimestamp;
        const allDays = moment.duration(endTimestamp - beginTimestamp).asDays();
        const nowDays = moment.duration(now - beginTimestamp).asDays();
        const fields = [
            { value: 1, start: .6, end: .7, duration: 0, fill: '#f4f5f8',},
            { value: +okrs.totalProgress, start: .6, end: .75, duration: 1500, fill: `#${+okrs.totalProgress < .6 ? +okrs.totalProgress === 0 ? 'f4f5f8' : 'f9ea94' : '7fd7af'}`, text: '进度'},
            { value: +(nowDays/allDays).toFixed(2), start: .53, end: .6, duration: 1500, fill: '#d2d5dd', text: '时间'},
        ];

        return (
            <div className={style['okr-layout']}>
                <MyProcess label={this.getLabel(allDays-nowDays)} fields={fields}/>
                <div className={style['okr-area']}>
                    {
                        objectiveVOList.slice(0,3).map((v, i) => {
                            return (
                                <div className={style['okr-item']} key={i}>
                                    <div style={{width: '20px'}}>
                                        <Priority  value={v.priority}/>
                                    </div>
                                    <div style={{width: '125px'}}  className={style['okr-title']}>
                                        <div style={{width: '125px'}}  className={style['ell']}><a  onClick={()=>{this.props.toOkr(null,v.objectiveId)}}>{v.content}</a></div>
                                    </div>
                                    {thumbup[i] ? <div
                                        className={style["kr-like"] + " " + style[thumbup[i].isThumpBup == 0 ? "kr-islike" : "kr-notlike"]}
                                    >
                                        <img className={style["kr-like-icon"]} style={{top: "15px"}}
                                             src={`${util.getImagePath()}/default/kr-like.png`} alt=""/>
                                        <img className={style["kr-islike-icon"]} style={{top: "15px"}}
                                             src={`${util.getImagePath()}/default/kr-islike.png`} alt=""/>
                                        <span>{thumbup[i] != null ? thumbup[i].total : 0}</span>
                                    </div> : null}
                                </div>
                            );
                        })
                    }
                </div>
            </div>
        );
    }
}

export default MyOkr;
